<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/css-doodle@0.8.0/css-doodle.min.css">
    <title>CSS-Doodle 旋转和变色动画</title>
</head>

<body>
    <p>Click Me</p>
    <css-doodle>
        :doodle {
        @grid: 1x20 / 100vmin;
        }
        @place-cell: center;
        width: @rand(60vmin, 100vmin);
        height: @rand(60vmin, 100vmin);
        transform: translate(@rand(-120%, 120%), @rand(-80%, 80%)) scale(@rand(.8, 2.8)) skew(@rand(45deg));
        clip-path: polygon(
        @r(0, 30%) @r(0, 50%),
        @r(30%, 60%) @r(0%, 30%),
        @r(60%, 100%) @r(0%, 50%),
        @r(60%, 100%) @r(50%, 100%),
        @r(30%, 60%) @r(60%, 100%),
        @r(0, 30%) @r(60%, 100%)
        );
        background: @pick(#f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #60569e, #e6437d, #ebbf4d, #00bcd4, #03a9f4,
        #2196f3,
        #009688, #5ee463, #f8e645, #ffc107, #ff5722, #43f8bf, #e136eb, #f57c23, #32ed39);
        opacity: @rand(.5, .9);
        position: relative;
        top: @rand(-80%, 80%);
        left: @rand(-80%, 80%);
        animation: colorChange @rand(6.1s, 26.1s) infinite @rand(-.5s, -2.5s) linear alternate;
        @keyframes colorChange {
        100% {
        left: 0;
        top: 0;
        filter: hue-rotate(360deg);
        }
        }
    </css-doodle>
    <script src="./1.js"></script>
</body>

</html>